// 导入React
import React from "react";

/**
 * 事件处理函数-额外参数传递方式
 * 1. 自定义属性
 * 2. 箭头函数延迟调用
 *    2.1 直接箭头函数
 *    2.2 .bind(this, '额外参数')
 */

 class Timer extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
             time: new Date().toLocaleTimeString(),
             zone: '东8区'
        }
    }

    // 第一种
    handleClick = (e) => {
      console.log('class 类实例',e.target.dataset.zone)
      this.setState({
          time: new Date().toLocaleTimeString()
      })
    }
    // 第二种
    // handleClick = (e) => {
    //   // 这里的e就是123
    // }
    // 第三种
    // handleClick = (e, param) => {
    //   // 这里e和123
    // }
    // 第四种
    // handleClick = (param,e) => {
    //   // 这里123和e
    // }
    render(){
        return (
            <div>
                <h1>当前时间是</h1>
                <h2>{this.state.time}</h2>
                {/* 第一种 */}
                <button data-zone={this.state.zone} onClick={this.handleClick}>点击查看最新时间</button>
                {/* 第二种 */}
                {/* <button data-zone={this.state.zone} onClick={this.handleClick(123)}>点击查看最新时间</button> */}
                {/* 第三种 */}
                {/* <button data-zone={this.state.zone} onClick={(e) => this.handleClick(e,123)}>点击查看最新时间</button> */}
                {/* 第四种 */}
                {/* <button data-zone={this.state.zone} onClick={this.handleClick.bind(this, 123)}>点击查看最新时间</button> */}

            </div>
        )
    }
}

export default Timer